<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>-->
    <Layout>
      <Menu mode="horizontal" theme="light" active-name="1" style="height: 85.5px">
          <div style="max-width: 1140px;min-width: 1200px;margin: auto;"> 
            <div class="layout-logo">
            <img alt="Vue logo" src="../static/image/logo.jpg" />
          </div>
          <div class="layout-nav">
            <router-link to="/">
              <MenuItem name="1">首页</MenuItem>
            </router-link>

            <router-link to="/news">
              <MenuItem name="2">归档</MenuItem>
            </router-link>

            <router-link to="/about">
              <MenuItem name="3">关于我</MenuItem>
            </router-link>
          </div>
          </div>
        </Menu>

      <Layout>
        <Content style="max-width: 1140px;min-width: 1200px;margin: auto;">
          <Row :gutter="20" justify="center">
            <Col span="18" style="margin-top: 16px;">
              <router-view />
            </Col>
            <Col span="6" style="margin-top: 16px;">
              <Card style="width:255px; ">
                <p slot="title" style="text-align: left;font-size: 1.2rem;">最新文章</p>
                <ul class="ivu-card-list">
                  <li>
                    <a href="#" target="_blank">博客的时代正在到来</a>
                  </li>

                  <li>
                    <a href="#" target="_blank">博客的崛起</a>
                  </li>

                  <li>
                    <a href="#" target="_blank">博客的时代正在到来</a>
                  </li>
                  <li>
                    <a href="#" target="_blank">博客的时代正在到来</a>
                  </li>
                </ul>
              </Card>
              <div style="width:255px;margin-top: 16px; height:108px;">
                <img src="../static/image/howto.png" style="width: 100%;" />
              </div>
            
            </Col>
          </Row>
        </Content>
      </Layout>

      <Footer
        style="background:#fbfbfb; margin-top:50px"
      >Copyright @ 2017~2019 Theme design by jeanstudio</Footer>
    </Layout>
  </div>
</template>

<style lang="scss">
.layout-nav {
  margin: 0 auto;
  margin-right: 37px;
  width: 248px;
}
.layout-logo {
  // width: 210px;
  // height: 65px;
  // background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 10px;
  // left: 345px;
}
.layout-logo img {
  width: 210px;
}
.ivu-menu-horizontal .ivu-menu-item {
  font-size: 1.0rem;
}
.ivu-card-list {
  list-style: none;
}
.ivu-card-list li {
  width: 100%;
  // border: dashed;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px dashed #eaeaea;
  overflow: hidden;
}
.ivu-card-list li a {
  color: #333;
  float: left;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>
